<template>
  <div>
    <div
      class="eg"
      id='basic'>

      <h3><a href="#basic">基本用法</a></h3>
      <e-tabs
        v-model="currentTab"
        :draggable="true"
        @on-drag-drop="handleDragDrop"
      >
        <e-tab-pane
          v-for="(tab, index) in tabList"
          :key="index"
          :label="tab.label"
          :name="tab.name"
        >{{ tab.label }}</e-tab-pane
        >
      </e-tabs>
      <p>
        value 与 TabPane 的 name 对应，用于标识当前激活的是哪一项，name 值默认从
        0 开始，默认激活第一项。可以使用 v-model 双向绑定数据
        <strong>current tab: {{ currentTab }}</strong>
      </p>
    </div>

    <div
      class="eg"
      id="disabled">
      <h3><a href="#disabled">禁用</a></h3>
      <e-tabs>
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane
          label="标签二"
          disabled>标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>
    </div>

    <div
      class="eg"
      id="icon">
      <h3 class="demo-inner-divider"><a href="#icon">图标</a></h3>

      <e-tabs>
        <e-tab-pane
          label="macOS"
          icon="folder">标签一的内容</e-tab-pane>
        <e-tab-pane
          label="Windows"
          icon="folder"
        >标签二的内容</e-tab-pane
        >
        <e-tab-pane
          label="Linux"
          icon="folder">标签三的内容</e-tab-pane>
      </e-tabs>
    </div>

    <div
      class="eg"
      id="size">
      <h3 class="demo-inner-divider"><a href="#size">迷你型</a></h3>

      <e-tabs
        size="small"
        type="line">
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>

      <p>设置属性 size 为 small 可以显示为迷你型，只在 type 为 line 时有效。</p>
    </div>

    <div
      class="eg"
      id="card">
      <h3 class="demo-inner-divider"><a href="#card">卡片样式</a></h3>

      <e-tabs type="card">
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>

      <p>设置属性 type 为 card 可以显示卡片样式，常用于容器顶部。</p>
    </div>

    <div
      class="eg"
      id="closable">
      <h3 class="demo-inner-divider"><a href="#closable">可关闭</a></h3>

      <e-tabs
        type="card"
        @on-tab-remove="handleTabRemove"
        closable>
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>

      <p>设置属性 type 为 card 可以显示卡片样式，常用于容器顶部。</p>
    </div>

    <div
      class="eg"
      id="render">
      <h3 class="demo-inner-divider"><a href="#render">自定义标签</a></h3>

      <e-tabs type="card">
        <e-tab-pane :label="renderFunc">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>

      <p>设置 label 为 Render 函数后，可以自定义标签页的内容。</p>
    </div>

    <div
      class="eg"
      id="extra">
      <h3 class="demo-inner-divider"><a href="#extra">附加内容</a></h3>

      <e-tabs type="card">
        <e-tab-pane
          v-for="tab in tabs"
          :key="tab"
          :label="'标签' + tab"
        >标签{{ tab }}</e-tab-pane
        >
        <template #extra>
          <span>
            <a
              @click="handleTabsAdd"
              style="user-select: none">增加</a>
            &nbsp;
            <a
              @click="handleTabsMinus"
              style="user-select: none">减少</a>
          </span>
        </template>
      </e-tabs>

      <p>设置 slot extra 可以在页签右边添加附加操作。</p>
    </div>

    <div
      class="eg"
      id="no-anim">
      <h3 class="demo-inner-divider"><a href="#no-anim">不使用动画</a></h3>

      <e-tabs :animated="false">
        <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
        <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
        <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
      </e-tabs>

      <p>通过设置属性 animated 为 false 可以禁用动画。</p>
    </div>

    <div
      class="eg"
      id="custom-style">
      <h3 class="demo-inner-divider">
        <a href="#custom-style">自定义样式</a>
      </h3>

      <div
        span="12"
        class="demo-tabs-style1"
        style="background: #e3e8ee; padding: 16px"
      >
        <e-tabs type="card">
          <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
          <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
          <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
        </e-tabs>
      </div>
      <div
        span="12"
        class="demo-tabs-style2">
        <e-tabs type="card">
          <e-tab-pane label="标签一">标签一的内容</e-tab-pane>
          <e-tab-pane label="标签二">标签二的内容</e-tab-pane>
          <e-tab-pane label="标签三">标签三的内容</e-tab-pane>
        </e-tabs>
      </div>

      <p>可以根据业务自定义 UI，需要一点额外的样式覆盖。</p>
    </div>

    <div
      class="eg"
      id="contextMenu">
      <h3 class="demo-inner-divider"><a href="#contextMenu">右键菜单</a></h3>

      <e-tabs>
        <e-tab-pane
          label="标签一"
          context-menu>标签一的内容</e-tab-pane>
        <e-tab-pane
          label="标签二"
          context-menu>标签二的内容</e-tab-pane>
        <e-tab-pane
          label="标签三"
          context-menu>标签三的内容</e-tab-pane>
        <template #contextMenu>
          待相关组件实现
        </template >
      </e-tabs>

      <p>TabPane 开启属性 context-menu，可以配合 slot contextMenu 实现点击右键弹出菜单。</p>
    </div>

    <div
      class="eg"
      id="dnd">
      <h3 class="demo-inner-divider"><a href="#dnd">拖拽调整页签顺序</a></h3>

      <e-tabs
        type="card"
        :draggable="true"
        @on-drag-drop="handleDragDrop">
        <e-tab-pane
          v-for="(tab,index) in tabList"
          :key="index"
          :label="tab.label"
          :name="tab.name">标签一的内容</e-tab-pane>
      </e-tabs>

      <p>开启属性 draggable，并配合事件 @on-drag-drop 可以实现拖拽调整页签顺序。</p>
    </div>

    <tabs-md class="markdown-body"/>
    <!-- Example End -->
  </div>
</template>
<script>
import tabsMd from '../../docs/tabs.md';
export default {
  components: {
    tabsMd
  },
  data() {
    return {
      tabList: [
        {
          label: '标签一',
          name: 'name1',
        },
        {
          label: '标签二',
          name: 'name2',
        },
        {
          label: '标签三',
          name: 'name3',
        },
        {
          label: '标签四',
          name: 'name4',
        },
        {
          label: '标签五',
          name: 'name5',
        },
      ],
      currentTab: 'name1',

      tabs: 2
    }
  },
  methods: {
    handleDragDrop(name, newName, a, b, names) {
      // names 为调整后的 name 集合
      this.tabList.splice(b, 1, ...this.tabList.splice(a, 1, this.tabList[b]))
    },
    handleTabRemove(name) {
      alert(name)
    },
    renderFunc() {
      return <div>{'(>_<)'}</div>
    },
    handleTabsAdd() {
      this.tabs++;
    },
    handleTabsMinus() {
      this.tabs = Math.max(1, this.tabs - 1)
    }
  },
}
</script>

<style scoped lang="less">
.eg {
  // border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;

  p {
    margin: 1rem 0;
    font-size: 14px;
  }
}
</style>

<style>

.demo-tabs-style1,
.demo-tabs-style2 {
  display: inline-block;
  width: 300px;
  vertical-align: top;
  margin-right: 1rem;
}
.demo-tabs-style1 > .haloe-tabs-card > .haloe-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.demo-tabs-style1 > .haloe-tabs-card > .haloe-tabs-content > .haloe-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.demo-tabs-style1 > .haloe-tabs.haloe-tabs-card > .haloe-tabs-bar .haloe-tabs-tab {
  border-color: transparent;
}

.demo-tabs-style1 > .haloe-tabs-card > .haloe-tabs-bar .haloe-tabs-tab-active {
  border-color: #fff;
}
.demo-tabs-style2 > .haloe-tabs.haloe-tabs-card > .haloe-tabs-bar .haloe-tabs-tab {
  border-radius: 0;
  background: #fff;
}
.demo-tabs-style2
  > .haloe-tabs.haloe-tabs-card
  > .haloe-tabs-bar
  .haloe-tabs-tab-active {
  border-top: 1px solid #3399ff;
}
.demo-tabs-style2
  > .haloe-tabs.haloe-tabs-card
  > .haloe-tabs-bar
  .haloe-tabs-tab-active:before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: #3399ff;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
